<!-- your_app/templates/home.html -->
{% extends 'learn/base.html' %}
{% load static %}


{% block title %}{{ lesson }}{% endblock %}

{% block content %}
    <div class="center">
  <h1 class="brand-title"><a href="/learn/">{{ brand }}</a></h1>
  <div class="center">

    <div class="parent">
      
      <div class="child question-border">
        <p class="lesson-title">课程：{{ lesson }}</p>
        <hr>
        <p class="question">
          <img class="speaker-icon" onclick="playAudio()" src="{% static 'img/speaker.svg' %}">
          <audio id="sentence-speaker">
            <source src="{% get_media_prefix %}{{ sentence.audio }}" type="audio/mpeg">
          </audio>
          {{ question | safe }}
        </p>
        <p>
          
          {% for option in options %}
          <button class="options gh-button"><ruby>{{ option.option | safe }}</ruby></button>
          {% endfor %}

        </p>
        <hr>
        <button class="disabled-button gh-button check-button">检查</button>
      </div>
    </div>
    <h1>{{ answer }}</h1>
</div>

<script type="text/javascript">

// 播放audio用原生js好一点
function playAudio() {
    var audio = document.getElementById('sentence-speaker');
    audio.load(); // 同时支持safari和chrome进行多次播放
    audio.play();
}

$(function() {
  // 绑定选项按钮
  $(".options").click(function() {
    var html = $(this).html();
    $('#blankspace').html('&nbsp;&nbsp;&nbsp;' + html + '&nbsp;&nbsp;&nbsp;'); // 将按钮文本设置为span的文本
    $('.check-button').removeClass('disabled-button');
  })
})

</script>

{% endblock %}


